{extend name="common/layout" /}
{block name="main"}
<t-card class="list-card-container" :bordered="false">
  <div style="display: flex; align-items: center; width: 280px; margin-bottom: 10px;">
    <div style="flex-grow: 1; margin-right: 5px;">
      <t-input v-model="searchValue" placeholder="请输入房产、房间" clearable @enter="handleSearch" />
    </div>
    <t-button theme="primary" @click="handleSearch">
      <template #icon><t-icon name="search" /></template>
    </t-button>
  </div>
  <t-table :data="tableData" :columns="columns" row-key="id" vertical-align="top" :bordered="true" size="small"
    active-row-type="single" :hover="true" :loading="tableLoading" :pagination="pagination">
    <template #op="slotProps">
      <t-space>
        <t-button size="small" @click="handleEdit(slotProps.row)">修改</t-button>
        <t-button size="small" theme="default" @click="handleContract(slotProps.row)">合同</t-button>
      </t-space>
    </template>
  </t-table>
</t-card>

<!-- 修改FORM -->
<t-dialog v-model:visible="dialogVisible" :header="formHeader" :width="680" :footer="false">
  <t-form ref="otherForm" :data="formData" :rules="rules" :label-width="100" @submit="handleSave">
    <t-form-item label="开始日期" name="start_date">
      <t-date-picker v-model="formData.start_date" mode="date" :style="{ width: '480px' }" clearable />
    </t-form-item>
    <t-form-item label="结束日期" name="end_date">
      <t-date-picker v-model="formData.end_date" mode="date" :style="{ width: '480px' }" clearable />
    </t-form-item>
    <t-form-item style="float: right">
      <t-button variant="outline" @click="dialogVisible = false" style="margin-right: 5px;">取消</t-button>
      <t-button theme="primary" type="submit">确定</t-button>
    </t-form-item>
  </t-form>
</t-dialog>
{/block}

{block name="script"}
<script>
  const data = {
    tableData: [],
    tableLoading: false,
    columns: [
      { title: '房产名', colKey: 'property_name', width: 80, fixed: 'left', },
      { title: '房间名', colKey: 'number_name', width: 80 },
      { title: '开始日期', colKey: 'start_date', width: 80 },
      { title: '结束日期', colKey: 'end_date', width: 80 },
      { title: '剩余天数', colKey: 'remaining', width: 80 },
      { title: '操作', colKey: 'op', width: 160, fixed: 'right', },
    ],
    // 分页
    pagination: {
      defaultPageSize: 10,
      total: 10,
      defaultCurrent: 1,
    },
    dialogVisible: false,
    formData: {},
    formHeader: '',
    rules: {
      start_date: [{ required: true, message: '必填' }],
      end_date: [{ required: true, message: '必填' }],
    },
    // 搜索框
    searchValue: '',
  };
  function f() {
    return {
      init: function () {
        this.queryTable();
      },
      queryTable: function () {
        this.tableLoading = true;
        axiosGet("{:url('queryContract')}", { 'parameter': this.searchValue }).then(response => {
          if (response.code == 1) {
            this.tableData = response.data;
            this.pagination.total = response.count;
          } else {
            this.$message.error('系统出错了!!!');
          }
          this.tableLoading = false;
        });
      },
      // 搜索
      handleSearch() {
        this.queryTable();
      },
      handleSave() {
        this.$refs.otherForm.validate().then((valid) => {
          if (valid == true) {
            if (this.formData.end_date < this.formData.start_date) {
              this.$message.warning('结束日期不能小于开始日期');
              return;
            }
            axiosPost("{:url('save')}", this.formData).then(response => {
              if (response.state == 'success') {
                this.$message.success(response.msg);
                this.dialogVisible = false;
                this.queryTable();
              } else if (response.state == 'warning') {
                this.$message.warning(response.msg);
              } else {
                this.$message.error(response.msg);
              }
            });
          }
        });
      },
      handleEdit(row) {
        this.$refs.otherForm.reset();
        this.formData = { ...row };
        this.formHeader = row.property_name + '-' + row.number_name + ' - 修改合同';
        this.dialogVisible = true;
      },
      // 合同
      handleContract(row) {
        axiosDownload("{:url('contract')}", { id: row.id });
      },
    }
  }
</script>
{/block}